<!--
 * @Author: zhangxiangsheng 1026583651@qq.com
 * @Date: 2024-06-17 15:04:34
 * @LastEditors: zhangxiangsheng 1026583651@qq.com
 * @LastEditTime: 2024-06-24 15:53:04
 * @FilePath: \appGly\components\zmodal\zmodal.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <view>
    <!-- 1541 -->
    <u-modal
      :show="show"
      ref="uModal"
      :title="config.title"
      :show-title="config.showtitle"
      :confirm-text="config.confirmText"
      :cancel-text="config.cancelText"
      :show-cancel-button="config.showcancel"
      @confirm="confirm"
      @cancel="cancel"
    >
      <slot>
        <view class="modalinput" v-if="config.type == 'input'">
          <u-input
            :focus="true"
            :placeholder="config.placeholder"
            v-model="config.modalvalue"
          />
          <!-- type="number" -->
        </view>
        <view class="u-model__content__message" v-else>
          {{ $z.$t(config.content || "内容") }}
        </view>
      </slot>
    </u-modal>
  </view>
</template>

<script>
  export default {
    name: "zmodal",
    data() {
      return {
        show: false,
        defaultconfig: {
          showtitle: true,
          showcancel: false,
          placeholder: "请输入内容",
          modalvalue: "",
          type: "",
        },
        config: {},
      };
    },
    methods: {
      init(config) {
        this.config = {
          ...this.defaultconfig,
          ...config,
        };
        this.show = true;
      },

      close() {
        this.show = false;
      },
      async confirm() {
        this.show = false;
        if (this.config.confirm) {
          this.config.confirm(this.config);
        }
      },
      async cancel() {
        this.show = false;
        console.log("cancel");
        if (this.config.cancel) {
          this.config.cancel();
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  .modalinput {
    padding: 20rpx;
  }

  .u-model__content__message {
    // padding: 17px;
    font-size: 14px;
    text-align: center;
    color: #606266;
  }
</style>
